<template>
  <div class="con">
    <span style="margin: 8px">月份:</span>
    <el-select v-model="selectedMonth" clearable placeholder="请选择月份" style="width: 360px" @change="showCustomer">
      <el-option
        v-for="month in options"
        :key="month.value"
        :label="month.label"
        :value="month.value"
      />
    </el-select>
    <div style="display: flex;">
      <div id="chart" class="container" style="width: 600px; height: 300px; flex: 1;" data-zoomable data-draggable />
      <div>
        <charts />
      </div>
    </div>
    <div>
      <charts1 />
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import customerApi from '@/api/customer/customer'
// eslint-disable-next-line no-unused-vars
import Charts from '@/views/customer/analysis/charts.vue'
// eslint-disable-next-line no-unused-vars
import Charts1 from '@/views/customer/analysis/charts1.vue'

const selectedMonth = ref('12')
// eslint-disable-next-line no-unused-vars
const options = computed(() => {
  const currentDate = new Date()
  const currentYear = currentDate.getFullYear()
  const months = [
    { label: '一月', value: '1' },
    { label: '二月', value: '2' },
    { label: '三月', value: '3' },
    { label: '四月', value: '4' },
    { label: '五月', value: '5' },
    { label: '六月', value: '6' },
    { label: '七月', value: '7' },
    { label: '八月', value: '8' },
    { label: '九月', value: '9' },
    { label: '十月', value: '10' },
    { label: '十一月', value: '11' },
    { label: '十二月', value: '12' }
  ]
  return months.map((month) => {
    return {
      label: `${currentYear}-${month.label}`,
      value: `${month.value}`
    }
  })
})

const option1 = {
  title: {
    text: '客户月订单数量',
    left: 'center',
    textStyle: {
      color: '#000',
      fontsize: 20
    }
  },
  tooltip: {},
  legend: {
    data: ['订单次数'],
    left: 'left'
  },
  grid: {
    containLabel: true,
    left: '2%',
    right: '2%',
    top: '12%',
    bottom: '5%'
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval: 0
    }
  },
  series: [
    {
      name: '订单次数',
      type: 'bar',
      data: 'category'
    }
  ],
  yAxis: {
    axisLabel: {
      formatter: '{value} 次'
    },
    label: {
      show: true,
      position: 'top' // 在顶部显示数据
    }
  }
}

onMounted(async() => {
  showCustomer()
})
// eslint-disable-next-line no-unused-vars
const showCustomer = () => {
  const myCharts = echarts.init(document.getElementById('chart'))
  myCharts.setOption(option1)
  window.onresize = function() {
    myCharts.resize()
  }

  const selected = selectedMonth.value
  console.log('选中的月份:', selected)
  customerApi.showNames(selected).then(res => {
    const customer = res.data
    console.log(customer)
    const customerName = []
    const customerTotal = []
    for (let i = 0; i < customer.length; i++) {
      console.log(customer[i].name)
      console.log(customer[i].total_who_id)
      customerName.push(customer[i].name)
      customerTotal.push(customer[i].total_who_id)
    }
    myCharts.setOption({
      xAxis: {
        data: customerName
      },
      series: [
        {
          name: '订单次数',
          type: 'bar',
          data: customerTotal,
          label: {
            show: true, // 显示数据标签
            position: 'top' // 数据标签位置，你可以根据需要调整
          }
        }
      ]
    })
  })
}

</script>

<style scoped lang="scss">
  .container{
    margin-top: 30px;
    box-shadow: 1px 5px 10px rgba(0, 0, 0.2, 0.1);
  }
</style>
